<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="shortcut icon" href="/img/favicon.ico"/>
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="/common/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/captcha/verify.css" media="all">
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <script>
    (function () {
      if (!window.Promise) {
        document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' + 'script>');
      }
    })();
  </script>
  <![endif]-->
  <style>
    html, body {width: 100%;height: 100%;overflow: hidden}
    body {background: #1E9FFF;}
    body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
    .layui-container {width: 100%;height: 100%;overflow: hidden}
    .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
    .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
    .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}
    .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
    .login-form .layui-form-item {position:relative;}
    .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
    .login-form .layui-form-item input {padding-left:36px;}
    .captcha {width:60%;display:inline-block;}
    .captcha-img {display:inline-block;width:34%;float:right;}
    .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
    .btn{border: none;outline: none;width: 300px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;background-color: #409EFF;color: #fff;font-size: 16px;letter-spacing: 1em;}
    .input-tips{color: red;margin: 0 35px;display: none;}
  </style>
</head>
<body>
<div class="layui-container">
  <div class="admin-login-background">
    <div class="layui-form login-form">
      <div class="layui-form">
        <div class="layui-form-item logo-title">
          <h1>Blog注册</h1>
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-username"></label>
          <input id="username" type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input">
          <span class="user-span input-tips">请填写登录账号</span>
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-password"></label>
          <input id="password" type="password" name="password" lay-verify="required" lay-reqtext="密码是必填项" placeholder="密码" autocomplete="off" class="layui-input">
          <span class="password-span input-tips">请填写用户密码</span>
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-email"></label>
          <input id="email" name="email" lay-verify="email" placeholder="邮箱" autocomplete="off" class="layui-input">
          <span class="email-span input-tips">请填写注册邮箱</span>
        </div>

        <div class="layui-form-item">
          <label class="layui-icon layui-icon-key"></label>
          <input id="code" name="code" placeholder="验证码" autocomplete="off" class="layui-input">
          <span class="code-span input-tips">请填写验证码</span>
        </div>

        <div class="layui-form-item">
          <button class="user-login layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit lay-filter="sendEmail">发送验证码</button>
        </div>
        <div class="layui-form-item">
          <button id="loginBtn" class="user-login layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit lay-filter="login">注 册</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="/common/jquery-1.11.3.js" charset="utf-8"></script>
<script type="text/javascript" src="/common/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/common/jquery.particleground.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/common/layer/layer.js"></script>
<!--加上滑动验证码js-->
<script type="text/javascript" src="/captcha/crypto-js.js"></script>
<script type="text/javascript" src="/captcha/ase.js"></script>
<script type="text/javascript" src="/captcha/verify.js"></script>
<script>
  $("#username").focus(function (){
    $(".user-span").css("display","block")
  })
  $("#username").blur(function (){
    $(".user-span").css("display","none")
  })
  $("#password").focus(function (){
    $(".password-span").css("display","block")
  })
  $("#password").blur(function (){
    $(".password-span").css("display","none")
  })
  $("#email").focus(function (){
    $(".email-span").css("display","block")
  })
  $("#email").blur(function (){
    $(".email-span").css("display","none")
  })
  $("#code").focus(function (){
    $(".code-span").css("display","block")
  })
  $("#code").blur(function (){
    $(".code-span").css("display","none")
  })

</script>
<script>
  // 粒子线条背景
  $(document).ready(function(){
    $('.layui-container').particleground({
      dotColor:'#7ec7fd',
      lineColor:'#7ec7fd'
    });
  });

  layui.use(['form'],function (){
    var form = layui.form;

    /**
     * 发送验证码
     */
    form.on('submit(sendEmail)',function (obj){

      var index = layer.msg("发送中",{icon:16,time:800});
      $.ajax({
        url:"/user/registerCode",
        data:{
          "username":obj.field.username,
          "email":obj.field.email
        },
        dataType:"json",
        type:"post",
        success:function (res){
          if (res.state){
            layer.msg("已发送，请注意查收",{icon:1,time:800})
            $("#code").attr("lay-verify","required");
            $("#code").attr("lay-reqtext","验证码是必填项");
          }else {
            layer.msg(res.msg,{icon:2,time:800});
          }
        }
      })
    })

    form.on('submit(login)',function (obj){

      $("#code").removeAttr("lay-verify");
      $("#code").removeAttr("lay-reqtext");
      $.ajax({
        type : "post",
        data: {
          "username" : obj.field.username,
          "password" : obj.field.password,
          "email" : obj.field.email,
          "code" : obj.field.code
        },
        url: "/user/register",
        success: function (res){
          if (res.state == true){
            layer.msg("注册成功",function (){
              location.href = "/login";
            });
          }else if (res.state == false){
            layer.msg(res.msg);
          }
        }
      })
    })
  })
</script>
</html>